<template>
  <div class="discuss">
    <el-container>
      <el-main class="d-main">
        <ul class="main-list" v-if="postList.length">
          <li class="main-list-item" v-for="item in postList" :key="item.id">
            <div class="d-title">
              <img :src="bindIMG(item.avatar)" alt="" class="d-avatar" />
              <span class="d-author">{{
                item.author ? item.author.name : "-"
              }}</span>
              <span class="d-date">发布于<i>{{ item.ctime | formatDate }}</i></span>
            </div>
            <div class="d-content">
              <a href="javascript:;" @click="goPostDetail(item)">{{
                item.title
              }}</a>
              <p>
                {{ item.desc || '....' }}
              </p>
            </div>

          </li>
        </ul>
        <template v-else>
          <el-empty description="暂未文章"></el-empty>
        </template>
        <el-pagination @size-change="handleSizeChange($event, fetchData)"
          @current-change="handleCurrentChange($event, fetchData)" :page-sizes="[1, 2, 5, 10]"
          layout="total,sizes, prev, pager, next" :total="total" class="t-pagination" v-if="postList.length">
        </el-pagination>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import mixin from '@mixins'
import api from '@/api';
import { bindIMG } from '@utils';
import { mapActions, mapGetters, mapMutations } from 'vuex';
export default {

  mixins: [mixin.home],
  data () {
    return {
      query: {
        page: 1,
        size: 10,
        keyword: null
      },
      total: 0,
      postList: {}
    };
  },
  methods: {
    bindIMG,
    ...mapActions(['getAllUser', 'getAllFile']),
    ...mapMutations(['setCurrentPost']),
    async fetchData () {
      try {
        const { list, total } = await api.getPostList(this.query);
        this.postList = list.map((item) => {
          const author = this.getUserById(item.userid);
          const file = this.getFileById(item.userid);
          const avatar = file ? file.filename : undefined;
          console.log('author :', author);
          return {
            ...item,
            author,
            avatar
          };
        });
        this.total = total;
      } catch (error) {
        console.log('error :', error);
      }
    },
    goAddPost () {
      this.$router.push({ name: 'addPost' });
    },
    goPostDetail (data) {
      this.setCurrentPost(data);
      this.$router.push(`/discuss/${data.id}`);
    }
  },
  computed: {
    ...mapGetters(['getUserById', 'getFileById'])
  },
  created () {
    this.getAllUser();
    this.getAllFile();
    this.fetchData();
  }
};
</script>

<style lang="less" scoped>
.discuss {
  // padding: 0 10%;
}

.aside-card {
  padding: 20px;

  .add-post {
    display: inline-block;
    background-color: #fff;
    border: 1px solid #21b351;
    border-radius: 6px;
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 18px;
    color: #21b351;

    i::before {
      font-size: 18px;
      margin-right: 6px;
    }

    &:hover {
      background-color: #e8f7ed;
    }
  }
}

.d-main {
  padding-top: 0;
}

.main-list {
  padding-top: 0;
  display: flex;

  gap: 12px;

  .main-list-item {
    width: 33%;
    min-height: 200px;
    background-color: #fff;
    padding: 20px;
    transition: all 0.2s ease-in;
    border: 1px dashed #ccc;

    .d-title {
      text-align: right;

      .d-avatar {
        width: 20px;
        height: 20px;
        vertical-align: bottom;
      }

      span[class^="d-"] {
        font-size: 14px;
        margin-left: 6px;
      }

      .d-author {
        color: #4a4a4a;
      }

      .d-date {
        color: #888;

        i {
          font-style: normal;
          margin-left: 4px;
        }
      }
    }

    .d-content {
      box-sizing: border-box;
      font-size: 14px;
      margin: 14px;

      &>a {
        display: inline-block;
        font-size: 18px;
        color: #111;
        font-weight: 700;
        margin-bottom: 20px;
      }

      &>p {
        color: #222;
        letter-spacing: 1px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }

    // &:hover {
    //   box-shadow: 1px 1px 4px 0px rgb(0 0 0 / 30%);
    // }
  }
}
</style>
